<template>
  <view class="address-book-details">
    <NavBar
      v-if="appInfoStore().isH5"
      title="通讯录"
    />
    <view
      class="details-box"
      :class="{ 'padding-top-navbar': appInfoStore().isH5 }"
    >
      <view class="address-book-details-title">
        <nut-searchbar
          v-model="searchValue"
          placeholder="搜索"
        >
          <template v-slot:leftin>
            <i
              class="iconfont icon-sousuo"
              style="font-size: 20px; color: #666"
            ></i>
          </template>
        </nut-searchbar>
        <view class="new-colleague-review">
          <view
            class="address-book-title-item"
            @click="addPopup"
          >
            <view class="book-title-left">
              <view
                class="book-title-left-icon"
                :style="{ backgroundColor: addOrganizationMap.bgColor }"
              >
                <img
                  :src="addOrganizationMap.iconImg"
                  alt=""
                />
              </view>
              <text class="book-title-left-text">{{ addOrganizationMap.organizationName }}</text>
            </view>
            <view class="book-title-right">
              <i
                class="iconfont icon-youjiantou1"
                style="font-size: 14px; color: #666"
              ></i>
            </view>
          </view>
        </view>
      </view>
      <view class="details-content">
        <view class="details-content-item">
          <view class="item-title">
            <text>通讯录</text>
            <i class="iconfont icon-youjiantou1"></i>
            <text class="select-title-text">{{ addOrganizationMap.detailName }}</text>
          </view>
          <view class="item-content">
            <addOrganization v-if="detailsId === '0'" />
            <addGroupChat
              v-if="detailsId === '1' || detailsId === '2'"
              :detailsId="detailsId"
            />
            <!-- <addMember v-if="detailsId === '2'" /> -->
          </view>
        </view>
      </view>
    </view>
    <nut-popup
      position="bottom"
      round
      :style="{ height: '80%' }"
      v-model:visible="state.isVisible"
    >
      <view class="popup-content">
        <view class="popup-content-box">
          <view class="popup-content-title">
            <view class="popup-cancel">取消</view>
            <view class="popup-title">选择新成员</view>
            <view class="popup-confirm">确认</view>
          </view>
          <view class="popup-content-search">
            <nut-searchbar
              v-model="searchValue"
              placeholder="搜索"
            >
              <template v-slot:leftin>
                <i
                  class="iconfont icon-sousuo"
                  style="font-size: 20px; color: #666"
                ></i>
              </template>
            </nut-searchbar>
          </view>
          <view class="popup-content-list">
            <text class="popup-con-title">选择联系人</text>
            <selectPerson />
          </view>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import NavBar from "@/components/navBar/index.vue";
import { appInfoStore } from "@/stores/appInfo";
import addOrganization from "./addOrganization/index.vue";
import addGroupChat from "./addGroupChat/index.vue";
import selectPerson from "@/components/selectPerson/index.vue";
import { useRouter } from "@tarojs/taro";
import { onMounted, reactive, ref } from "vue";
const rouer = useRouter();
// const props = defineProps(["detailsId"]);
const detailsId = ref<string | undefined>("");
const isAddPopup = ref(false);
const state = reactive({
  isVisible: false,
});
const addOrganizationMap = reactive({
  organizationName: "",
  detailName: "",
  bgColor: "",
  iconImg: "",
});
onMounted(() => {
  detailsId.value = rouer.params.detailsId;
  console.log(detailsId.value, "detailsId.value");
  handleAddOrganization();
});
const addPopup = () => {
  state.isVisible = !state.isVisible;
};
const handleAddOrganization = () => {
  if (detailsId.value === "0") {
    addOrganizationMap.organizationName = "添加企业组织";
    addOrganizationMap.detailName = "组织";
    addOrganizationMap.bgColor = "#FF9100";
    addOrganizationMap.iconImg =
      "https://img.alicdn.com/imgextra/i2/1034622205/O1CN01UsGXjq1S9wNf9YLWg_!!1034622205.png";
  } else if (detailsId.value === "1") {
    addOrganizationMap.organizationName = "添加新群聊";
    addOrganizationMap.detailName = "群聊";
    addOrganizationMap.bgColor = "#00BE20";
    addOrganizationMap.iconImg =
      "https://img.alicdn.com/imgextra/i3/1034622205/O1CN01b44R0G1S9wNfdcwSH_!!1034622205.png";
  } else if (detailsId.value === "2") {
    addOrganizationMap.organizationName = "添加新成员";
    addOrganizationMap.detailName = "我的部门";
    addOrganizationMap.bgColor = "#1E74FD";
    addOrganizationMap.iconImg =
      "https://img.alicdn.com/imgextra/i3/1034622205/O1CN01OqHqrn1S9wNdyQ7n3_!!1034622205.png";
  }
};
</script>
<style lang="less">
@import "./index.less";
// @import url("../../../../assets/css/index.css");
@import "@/assets/css/index.less";
</style>
